<template>
  <div id="app">
    <loading-transition
      v-if="loadingTransitionOut"
      v-model="loadingTransition">
    </loading-transition>
    <nav-Tab
      :routerList="routerList">
    </nav-Tab>
    <div class="main">
      <transition name="fade" mode="out-in">
        <router-view />
      </transition>
    </div>
    <footer-tip></footer-tip>
  </div>
</template>
<script>
import navTab from "./components/navTab/navTab.vue";
import footerTip from "./components/footerTip/footerTip.vue";
import loadingTransition from "./components/loading-transition/loading-transition.vue";

export default {
  name: "app",
  components: {
    navTab,
    footerTip,
    loadingTransition
  },
  data() {
    return {
      loadingTransition:true,
      loadingTransitionOut:true,
      routerList: [
        {
          id: 1,
          path: "/",
          name: "蜜蜂首页",
        },
        {
          id: 2,
          path: "/detailShow",
          name: "详情展示",
        },
        {
          id: 3,
          path: "/aboutUS",
          name: "关于我们",
        },
      ],
    };
  },
  mounted(){
    setTimeout(()=>{
      this.loadingTransition = false;
    },1500)
    setTimeout(()=>{
      this.loadingTransitionOut = false;
    },1600)
  }
};
</script>
<style lang="scss">
@import url(./assets/css/style.css);
@import url(./assets/css/common.css);
@import url(./assets/css/rem.scss);
.main{
  background: url(./assets/images/07.png) -4rem -72rem no-repeat;
  // background-size: 100% calc(100vh - 68rem);
  width: 100%;
  height: calc(100vh - 68rem);
  // overflow: hidden;
}
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

</style>
